<template>
  <div>
    <van-nav-bar
        title="评论详情"
        left-arrow
        @click-left="onBack"
        fixed
    />
    <div style="margin-top: 50px">
      <!--    <van-cell title="书评" is-link @click="goToWriteReview" />-->
      <div style="width: 90%;margin-left: 15px">
        <van-image style="width: 50px;height: 50px;float: left" :src="review.userurl" round/>
        <span style="margin-left: 20px;float: left">{{ review.username }}</span>
        <div style="float: left;margin-top: 25px;margin-left:-45px">
          <van-rate v-model="review.score/2" readonly allow-half color="#ffd21e" void-icon="star" void-color="#eee"/>
        </div>

        <div>
          <span style="float: left;margin-top: 20px;width: 100%">{{ review.comment }}</span>
        </div>
        <div>
          <span style="float: left;margin-top: 20px">{{ review.commenttime }}</span>
        </div>
      </div>
    </div>

    <div style="padding-top: 20px;margin-bottom: 60px">
      <van-cell style="font-size: 18px" title="全部回复"/>
      <van-cell v-for="(review, index) in reviews" :key="index">
        <div>
          <van-image style="width: 50px;height: 50px;float: left" :src="review.userurl" round/>
          <span style="margin-left: 20px;float: left">{{ review.username }}</span>
          <div>
            <span style="float: left;margin-top: 20px;width: 100%">{{ review.content }}</span>
          </div>
          <div>
            <span style="float: left;margin-top: 20px">{{ review.time }}</span>
          </div>
        </div>
      </van-cell>
    </div>

    <div id="app" class="comment-box">
      <input type="text" v-model="replyText" placeholder="回复 :">
      <button @click="submit">发表</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "NovelReply",
  data() {
    return {
      review: {},
      reviews: [],
      replyText: '',
      adds:{},
      timer: null // 用于存储定时器的引用
    }
  },
  created() {
    this.list();
    this.findall();
  },


  methods: {
    onBack() {
      this.$router.push({path: '/noveldetails', query: {id: this.$route.query.id}});
    },

    list() {
      axios.post(`http://localhost:9999/api-novel/score/findid?id=${this.$route.query.pid}`).then(res => {
        this.review = res.data.data;
      })
    },
    findall() {
      axios.post('http://localhost:9999/api-novel/reply/findall?pid=' + this.$route.query.pid).then(res => {
        if (res.data.code == 1) {
          this.reviews = res.data.data;
          console.log(this.reviews)
        }
      })
    },
    submit() {
       let users = localStorage.getItem("user");
      if(users!=null){
        this.adds.pid=this.$route.query.pid;
        this.adds.content=this.replyText;
        this.adds.uid=JSON.parse(users).id;
        axios.post('http://localhost:9999/api-novel/reply/add',this.adds).then(res => {
          if (res.data.code == 1) {
            this.$toast.success('回复成功');
            this.findall();
            this.replyText = '';
            axios.post("http://localhost:9999/api-task/dailyTasks/updateReadingShell?userId="+JSON.parse(users).id).then(res=>{
              console.log("评论其他感想+1")
            })
          }
        })
      }else{
        this.$toast.fail('请先登录');
      }
    }
  }
}
</script>


<style scoped>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app- container {
  flex: 1;
}

.comment-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-top: 1px solid #ccc;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #ccc;
  cursor: pointer;
}

</style>
